简介

TabLayout：顾名思义，就是能够提供给我们标签页功能的控件。它通常用于与
ViewPager 联合使用，使界面具备滑动切换标签功能（TabLayout 本身已提供接口无缝结合 ViewPager 使用）。

来看下 TabLayout 的官方文档描述：

TabLayout

可以看到，TabLayout 存在于 design 包中，且继承于 HorizontalScrollView，提供了一个水平布局去显示标签页面。

TabLayout 的常用属性和方法

TabLayout 除了 Android 控件固有的属性（以 android: 为命名空间）之外，还定义了些特有的属性（是以 ”app:” 的命名空间的,形如app:tabMode），下面罗列一些使用相对频繁的属性：

下面罗列 TabLayout 一些相对重要的方法：

示例

• 直接为 TabLayout 添加标签（tab）：

 TabLayout tabLayout = ...;
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

可以看到：newTab 就是创建一个新的标签，然后通过 addTab 添加该标签到 TabLayout 中。

当然也可以直接在布局文件中指定标签，但是实际开发中一般不这样用：

<android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.design.widget.TabItem
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

• TabLayout 联合 ViewPager 使用：
  先直接看下布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

从上面的布局中，我们可以看出，布局很简单，就只包含 TabLayout 和 ViewPager，且 TabLayout 的特有属性均使用默认值。

然后再来看下源码：

public class TabLayoutActivity extends AppCompatActivity {
    private static final int TAB_NUM = 3;

    @BindView(R.id.viewpager)
    private ViewPager mViewPager;
    @BindView(R.id.tablayout)
    private TabLayout mTabLayout;

    private List<Fragment> mFragments;

    @Override
    @ViewInject(ViewInject.ACTIVITY)
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);
        initData();
        initView();
    }

    private void initData() {
        this.mFragments = new ArrayList<>();
    }

    private void initView() {
//        generate Fragmetns
        for (int i = 0; i < TabLayoutActivity.TAB_NUM; ++i) {
            this.mFragments.add(MyFragment.newInstance("Fragmetn: " + i));
        }
//        set up adapter for ViewPager
        this.mViewPager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return TabLayoutActivity.this.mFragments.get(position);
            }

            @Override
            public int getCount() {
                return TabLayoutActivity.this.mFragments.size();
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return "Tab" + position;
            }
        });
//        connect TabLayout and ViewPager
        this.mTabLayout.setupWithViewPager(this.mViewPager);
    }
}

首先是创建3个Fragment，然后给 ViewPager 设置一个FragmentPagerAdapter，将先前创建的Fragment通过该Adapter设置给 ViewPager。最后通过setupWithViewPager将 TabLayout 和 ViewPager 关联起来。

上述代码的效果如下：

TabLayout default value

更多代码详情，请查看：TODO::

接下来，我们改变一下 TabLayout 的app:tabMode和app:tabGravity，来看下效果有什么不同：

• app:tabMode="fixed"且app:tabGravity="center"，效果如下：

tabMode="fixed"`且`tabGravity="center"`

可以看到跟我们上面的示例是一摸一样的，也就是app:tabMode="fixed"和app:tabGravity="center"就是默认的值。

• app:tabMode="fixed"且app:tabGravity="fill"，效果如下：

tabMode="fixed"`且`tabGravity="fill"`

可以看到，因为app:tabMode="fixed"表示标签无法滚动，而app:tabGravity="fill"表示填满标签（tab），因此这里的效果就是标签页均分填满了 TabLayout。

• 前面我们说过，当app:tabMode="scrollable"时，tabGravity的设置就不起作用了，所以我们直接来看下app:tabMode="scrollable"的效果：

app:tabMode="scrollable"

可以看到，app:tabMode="scrollable"时，标签页布局默认都是从左往右排列的。

一般使用app:tabMode="scrollable"都是用于标签过多的情况的，此时，可以通过滑动标签来进行选择，效果如下所示：

app:tabMode="scrollable"

总结：

• 当app:tabMode="fixed"时，若app:tabGravity="center"，则标签居中显示；若app:tabGravity="fill"时，则标签均分填满 TabLayout。

• 当app:tabMode="scrollable"时，app:tabGravity不起作用，默认标签布局为从左往右排列，该属性一般用于标签过多情况，可以通过直接滑动标签进行选取。

最后，如果我们想把标签放置到布局底部，应该怎样做呢？

其实很简单，只需更改布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />  //占用上面，留出位置给TabLayout

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp" //因为默认指示器在下面，不合适使用在底部菜单所以直接设置其高度为0
        app:tabMode="fixed"
        app:tabSelectedTextColor="#FFFFFF"
        app:tabTextColor="#000000" />
</LinearLayout>

效果如下：

TabLayout_bottom

参考

• 官方文档 - TabLayout

• Android Design Support Library系列之一：TabLayout的使用

• Android进阶——Material Design新控件之TabLayout制作可滚动的Tabs页面（二）